<template>
	<el-card class="box-card">
		<el-row>
			<el-col :span="2">
				<img :src="parent.headImg" class="avatar" />
			</el-col>
			<el-col :span="22" style="line-height: 30px;">
				<el-row>
					<span>{{parent.nickName}}</span>
					<span>{{parent.phone}}</span>
				</el-row>
				<el-row>
					<span>{{parent.gender=="0"?"女":"男"}}</span>
					<span>{{parent.country}}</span>
				</el-row>
			</el-col>
		</el-row>
		<el-tabs type="border-card" style="margin-top: 20px;" @tab-click="handleClick">
		  	<el-tab-pane v-for="item in babyList" :key="item.id" :label="item.babyName">
		  		<el-row style="margin-top: 20px;">
					<span>{{item.babyName}}</span>
					<span style="padding-left:20px;">{{item.babySex=="0"?"女":"男"}}</span>
					<span style="padding-left:20px;">{{item.birthDay}}</span>
				</el-row>
		  	</el-tab-pane>
		  	<el-row style="margin-top: 20px;">
				<el-table :data="orderList" border stripe style="width: 100%;">
					<el-table-column prop="id" label="ID">
					</el-table-column>
					<el-table-column prop="course.courseName" label="课程">
					</el-table-column>
					<el-table-column prop="customer.customerName" label="服务商" width="150">
					</el-table-column>
					<el-table-column prop="customer.customerAddress" label="地址">
					</el-table-column>
					<el-table-column prop="customer.linkerName" label="联系人">
					</el-table-column>
					<el-table-column prop="customer.linkerPhone" label="电话">
					</el-table-column>
					<el-table-column prop="courseTime.startTime" label="上课时间">
					</el-table-column>
					<el-table-column prop="yesCourse" label="已上课">
					</el-table-column>
					<el-table-column prop="noCourse" label="退课">
					</el-table-column>
				</el-table>
				<el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" layout="prev, pager, next" :total="count">
				</el-pagination>
			</el-row>
		</el-tabs>

	</el-card>
</template>

<script>
	import { parentsInfo, getBabyList,listByTime} from '@/api/getData'
	export default {
		data() {
			return {
				parent:{},
				babyList:[],
				orderList:[],
				limit: 10,
				count: 0,
				currentPage: 1,
				babyId:"",
			};
		},
		created() {
			let id = this.$route.query.id;
			console.log(id);
			this.parentsInfo(id);
			this.getBobyList(id);

		},
		methods: {
			async parentsInfo(id) {
				try {
					const returnData = await parentsInfo({
						id: id,
					});
					if(returnData.code == "0") {
						this.parent = returnData.obj;
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			async getBobyList(ownerId){
				try {
					const returnData = await getBabyList({
						ownerId: ownerId,
						pageSize: this.limit.toString(),
						pageNum: this.currentPage.toString(),
					});
					if(returnData.code == "0") {
						returnData.list.rows.forEach(function(item){
							item.birthDay = item.birthDay.substr(0,10);
						});
						this.babyList = returnData.list.rows;
						if(this.babyList.length != 0){
							//查询订单记录
							this.babyId = this.babyList[0].id;
							this.getListByTime();
						}
						
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
		
			},
			async getListByTime(){
				try {
					const returnData = await listByTime({
						isOver: "1",
						babyId:this.babyId,
						pageSize: this.limit.toString(),
						pageNum: this.currentPage.toString(),
					});
					if(returnData.code == "0") {
						returnData.obj.rows.forEach(function(item){
							item.courseTime.startTime = item.courseTime.startTime.substr(0,16);
							if(item.orderStatus == 3){
								item.yesCourse = "是";
							}else if(item.orderStatus == -1){
								item.noCourse = "是";
							}else{
								item.yesCourse = "否";
								item.noCourse = "否";
							}
						});
						this.orderList = returnData.obj.rows;
						this.count = Number(returnData.obj.total);
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
		
			},
			handleSizeChange(val) {
				console.log("每页 ${val} 条");
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getListByTime();
			},
			handleClick(tab, event) {
		       this.babyId = this.babyList[tab.index].id;
		       this.currentPage = 1;
		       this.getListByTime();
	        }
		}
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	.page{
	    text-align: right;margin-top:10px;padding:0px;
	}
</style>